{% extends 'base.html' %}

{% block top_content %}

    <div class="gcb-cols">
      <div class="gcb-col-11 gcb-aside">
        <div class="gcb-col-55">
          <h1 class="product-headers gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/course/coursename/" >{{ coursesetup.coursename }}</h1>
          <h2 class="product-headers gcb_a_editable_area" gcb-a-action="/editor/{{ coursecode }}/course/course_description/" >{{  coursesetup.course_description }}</h2>
          <h2 class="bio-headers gcb_a_editable_area"  gcb-a-action="/editor/{{ coursecode }}/course/course_instructor/"  >{{  coursesetup.course_instructor }}</h2>
        </div>
        {% if coursesetup.video_introduction %}
        <div class="gcb-col-5 gcb_a_editable_video"> {# TODO #}
          <iframe width="460" height="300" src="{{ coursesetup.video_introduction }} "
            frameborder="0" allowfullscreen></iframe>
        </div>
        {% elif coursesetup.banner_image %}
         <div class="gcb-col-5">
          <img height="300" src="{{ coursesetup.banner_image }}" class="gcb_a_editable_image"> {# TODO #}
        </div>
        {% endif %}
      </div>
    </div>

    <div style="margin-top: 20px;" class="gcb-cols">
      <div class="gcb-col-1">
         <a href="javascript:void(0);" class="gcb_a_open_dialog gcb_a_control"   style="display: none;"  gcb-a-dialog="gcb_a_add_unit_dialog" >Add New Unit</a>
      </div>
      <div class="gcb-col-9">

        <h1 class="schedule-headers">Schedule</h1>
        <div class="gcb-main">
          <div style="width: 100%;" class="gcb-nav" id="gcb-nav-y">
            <ul id="gcb_course_units">
	      {% for unit in units %}
	        {% if unit.now_available %}
                  {% if unit.type == 'A' %}
                    <li><p class="top_content"><a href="/{{ coursecode }}/assessment?name={{ unit.unit_id }}" class="gcb_a_editable"    gcb-a-action="/editor/{{ coursecode }}/unit/{{ unit.unit_id }}/title/" >{{ unit.title }}</a></p></li>
                  {% elif unit.type == 'U' %}
                    <li><p class="top_content"><a href="/{{ coursecode }}/unit?unit={{ unit.unit_id }}" >Unit {{ unit.unit_id }} - <span class="gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/unit/{{ unit.unit_id }}/title/" >{{ unit.title }}</span> </a></p></li>
                  {% elif unit.type == 'O' %}
                    <li><p class="top_content"><a href="{{ unit.unit_id }}"  class="gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/unit/{{ unit.unit_id }}/title/" > {{ unit.title }} </a></p></li>
                  {% else %}
                    <li><p class="top_content">Error: unit type not recognized.</p></li>
		  {% endif %}
		{% else %}
		  {% if unit.type == 'A' %}
                    <li><p class="top_content"  class="gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/unit/{{ unit.unit_id }}/title/" >{{ unit.title }}</p></li>
		  {% elif unit.type == 'U' %}
                    <li><p class="top_content">Unit {{ unit.unit_id }} - <span class="gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/unit/{{ unit.unit_id }}/title/" >{{ unit.title }}</span> <span style="padding-left: 20px; font-size: 12px; color: #5e94ff;">{{ unit.release_date }}</span></p></li>
                  {% elif unit.type == 'O' %}
                    <li><p class="top_content" class="gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/unit/{{ unit.unit_id }}/title/" > {{ unit.title }} </p></li>
                  {% else %}
                    <li><p class="top_content">Error: unit type not recognized.</p></li>
  		  {% endif %}
		{% endif %}

	      {% endfor %}	      
            </ul>
          </div>
        </div>

      </div>
    </div>

{# this is the controller for adding new units, it contains the dialog and spec of where the output of the dialog will go. #}
<div class="gcb_q_hidden gcb_a_control_container" >
   <div class="gcb_q_hidden gcb_a_dialog" id="gcb_a_add_unit_dialog" title="New Unit Details" width="700px">
	       {% include "fragments/mini-unit-editor.html" with context %}
   </div>
   <span class="gcb_a_template" gcb-a-action="/editor/{{ coursecode }}/newunit" gcb-a-target="gcb_course_units"  gcb-a-template="gcb_add_new_unit"  />
</div>

{# Template referenced above. #}
 <script id="gcb_add_new_unit" type="text/x-jsrender">
       <li><p class="top_content">Unit ${unit_id} - <span class="gcb_a_editable" gcb-a-action="/editor/{{ coursecode }}/unit/${unit_id}/title/" >${title}</span></p></li></span>
</script>

{% endblock %}

{% block main_content %}
  
{% endblock %}
